<!-- 广告列表 -->
<template>
  <div class="table">
    <el-tabs v-model="activeName" @tab-click="handleChangeTabs">
      <el-tab-pane label="广告列表" name="one">
        <div class="container">
          <div class="crumbs">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                <el-icon>
                  <Search />
                </el-icon> 查询条件：
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row :gutter="10">
            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-select v-model.trim="searchCondition.position" placeholder="广告位置" clearable class="">
                <el-option v-for="item in state.selectAdvertising" :label="item.dictLabel" :value="item.dictValue"
                  :key="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-select v-model.trim="searchCondition.banner_type_id" placeholder="广告类型" clearable class="">
                <el-option v-for="item in state.selectBannerType" :label="item.type_name" :value="item.id"
                  :key="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-input v-model.trim="searchCondition.banner_name" placeholder="广告名称" clearable></el-input>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-button type="success" :icon="Search" :disabled="disabledbtn" @click="searchInfo">搜索</el-button>
              <el-button type="warning" :icon="Refresh" :disabled="disabledbtn" @click="resetSearch">重置</el-button>
            </el-col>
          </el-row>
          <div class="crumbs">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item> 查询结果：</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="handle-box">
            <el-button type="primary" :icon="Plus" class="mr10" :disabled="disabledbtn" @click="setActiveName('two')">新增
            </el-button>
            <el-popconfirm placement="top" width="160" title="你确定要删除吗?" @confirm="batchDelete('deleteBannerInfo')">
              <template #reference>
                <el-button type="danger" :icon="Delete" class="mr10" :disabled="disabledbtn">批量删除
                </el-button>
              </template>
            </el-popconfirm>
          </div>
          <el-table :data="tableState.tableList" border class="table" ref="multipleTableRef" v-loading="tableLoading"
            :reserve-selection="true" @row-dblclick="rowDblclick">
            <el-table-column type="index" align="center"> </el-table-column>
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="positionName" label="广告位置" align="center">
            </el-table-column>
            <el-table-column prop="bannerTypeName" label="广告类型" align="center">
            </el-table-column>
            <el-table-column prop="banner_name" label="广告名称" align="center">
            </el-table-column>

            <!-- <el-table-column prop="start_time"
                             label="开始时间"
                             align="center">
            </el-table-column>
            <el-table-column prop="end_time"
                             label="结束时间"
                             align="center">
            </el-table-column> -->
            <el-table-column prop="sort" label="排序" align="center">
              <template #default="scope">
                <div class="">
                  <el-input v-model.trim.number="scope.row.sort" placeholder="请输入内容" @change="handleSort(scope.row)">
                  </el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template #default="scope">
                <el-button type="primary" size="small" text :icon="View" @click="handleViewEdit(scope.row, 'view')">
                  查看
                </el-button>
                <el-button type="primary" size="small" text :icon="Edit" @click="handleViewEdit(scope.row, 'edit')">
                  编辑
                </el-button>
                <div class="mlr10 display-inline-block">
                  <el-popconfirm placement="top" width="160" title="你确定要删除吗?"
                    @confirm="deleteInfo('deleteBannerInfo', [id])">
                    <template #reference>
                      <el-button text :icon="Delete" size="small" class="red" @click="id = scope.row.id">删除
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination background @update:current-page="handleCurrentChange" @update:page-size="handleSizeChange"
              layout="total, sizes, prev, pager, next, jumper" :page-size="searchCondition.size"
              :current-page="searchCondition.current" :page-sizes="pageSizes" :total="total"
              :hide-on-single-page="false">
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="商品详情" name="two">
        <div class="container">
          <el-form ref="advertisingInfoFormRef" :model="advertisingInfoForm" :rules="rules" v-loading="formLoading"
            label-width="150px">
            <el-row :gutter="10">
              <el-col :span="10">
                <el-form-item label="广告位置：" prop="position">
                  <el-select v-model.trim="advertisingInfoForm.position" placeholder="广告位置" class=""
                    @change="handleChangeAdvertising">
                    <el-option v-for="item in state.selectAdvertising" :label="item.dictLabel" :value="item.dictValue"
                      :key="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="广告类型：" prop="banner_type_id">
                  <el-select v-model.trim="advertisingInfoForm.banner_type_id" placeholder="广告类型" class="">
                    <el-option v-for="item in state.selectBannerType" :label="item.type_name" :value="item.id"
                      :key="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-tooltip placement="top" content="选择---无详情页面---时，无需填写商品id,和广告详情">
                  <el-icon class="icon-wzg-config">
                    <InfoFilled />
                  </el-icon>
                </el-tooltip>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="10">
                <el-form-item label="广告名称：" prop="banner_name">
                  <el-input v-model.trim="advertisingInfoForm.banner_name" placeholder="广告名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="商品id：" prop="goods_id">
                  <el-input v-model.trim="advertisingInfoForm.goods_id" placeholder="商品id"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-tooltip placement="top" content="跳转到商品详情页面才需要填写">
                  <el-icon class="icon-wzg-config">
                    <InfoFilled />
                  </el-icon>
                </el-tooltip>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="10">
                <el-form-item label="排序：" prop="sort">
                  <el-input v-model.trim="advertisingInfoForm.sort" placeholder="排序"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="20">
                <el-form-item label="广告图片：" prop="image">
                  <div class="w-spec">
                    <el-upload class="avatar-uploader" v-if="!advertisingInfoForm.image" :action="uploadUrl"
                      :data="uploadData" :show-file-list="false"
                      :on-success="(response) => handleResourcesUploadSuccess(response, advertisingInfoForm, 'image')"
                      :before-upload="(file) => handleBeforeUpload(file)">
                      <el-icon class="avatar-uploader-icon" :class="advertisingInfoForm.position === 'aixzuRedPacketAdvertising' ? 'avatar-uploader-icon--axzad' :
  advertisingInfoForm.position === 'aixzuRedPacketBanner' ? 'avatar-uploader-icon--axzba' :
    advertisingInfoForm.position === 'aixzuDailySpecial' ? 'avatar-uploader-icon--axzds' : ''">
                        <Plus />
                      </el-icon>
                    </el-upload>
                    <div class="wzg-continer-img" :class="advertisingInfoForm.position === 'aixzuRedPacketAdvertising' ? 'wzg-continer-img--axzad' :
  advertisingInfoForm.position === 'aixzuRedPacketBanner' ? 'wzg-continer-img--axzba' :
    advertisingInfoForm.position === 'aixzuDailySpecial' ? 'wzg-continer-img--axzds' : ''" v-else>
                      <img :src="advertisingInfoForm.image === '' ? '' : imageUrl + advertisingInfoForm.image" alt="头像"
                        class="wzg-img">
                      <el-icon class="el-icon-close" @click="handleDeleteResources(advertisingInfoForm, 'image')">
                        <Close />
                      </el-icon>
                    </div>
                    <p class="img-desc">
                      建议：尺寸{{ suggest }}像素(等比例亦可)，大小200k以下。
                    </p>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="10">
                <el-form-item label="广告详情：" prop="detail">
                  <div style="width: 397px;border: 1px solid #ccc; margin-top: 10px">
                    <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" mode="default"
                      style="border-bottom: 1px solid #ccc" />
                    <Editor :defaultConfig="editorConfig" mode="default" v-model="valueHtml"
                      style="height: 700px; overflow-y: hidden" @onCreated="handleCreated"
                      @onChange="(editor) => handleEditorChange(advertisingInfoForm, 'detail', editor)" />
                  </div>
                  <div>
                    描述：通用活动页面的详情的展示
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="footer-center">
            <el-button :disabled="disabledbtn" @click="cancelSubmit">取 消</el-button>
            <el-button type="primary" :disabled="disabledbtn" v-if="!isDisabledbtn"
              @click="submitForm('commonBannerInfo', getTableInfo, handleValidAssignment)">确 定</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { reactive, ref, onBeforeUnmount } from 'vue';
import { ElMessage } from 'element-plus';
import { View, Delete, Edit, Search, Plus, Refresh } from '@element-plus/icons-vue';
import { api as Request, imageUrl, uploadUrl } from '@/utils/api';
import { useTable } from '@/hooks/useTable.js';
import { useTabsForm } from '@/hooks/useTabsForm.js';
import { useSort } from '@/hooks/useSort.js';
import { useDictData } from '@/hooks/network/useDictData.js';
import { useListData } from '@/hooks/network/useListData.js';
import { useUpload } from '@/hooks/useUpload.js';
import useWangeditor from '@/hooks/useWangeditor.js';
import useRules from '@/hooks/useRules.js';

const disabledbtn = ref(false);/*  按钮可用与不可用 */
const formLoading = ref(false);/*  对话框中数据提交加载 */
let { editorRef, valueHtml, toolbarConfig, editorConfig, handleCreated,
  handleEditorChange, handleDestroyEditor, Editor, Toolbar } = useWangeditor();
let { total, pageSizes, multipleTableRef, tableLoading, tableState, searchCondition,
  handleCurrentChange, handleSizeChange, getTableInfo, searchInfo, resetSearch, batchDelete, deleteInfo, rowDblclick } =
  useTable({
    banner_type_id: '',
    position: '',
    banner_name: '',
    current: 1,
    size: 10
  }, 'getBannerInfo', disabledbtn);
let { formRef: advertisingInfoFormRef, formData: advertisingInfoForm, methodType, isDisabledbtn,
  activeName, setActiveName, handleChangeTabs, submitForm, handleClearData: cancelSubmit } = useTabsForm({
    id: '',
    image: '',
    goods_id: '',
    banner_type_id: '',
    banner_name: '',
    position: '',
    detail: '',
    sort: 0,
    // start_time: '',
    // end_time: ''
  }, disabledbtn, handleCustomOperation, formLoading);
let { handleSort } = useSort('putBannerSortInfo', searchInfo);

const rules = useRules('advertisingInfoRules');/* 校验规则 */
const state = reactive({
  selectAdvertising: [],/* 广告位置 */
  selectBannerType: [],/* 广告类型 */
});
let { getDictDataInfo } = useDictData();
let { getListDataInfo } = useListData();
let { uploadData,
  handleDeleteResources, handleResourcesUploadSuccess, handleBeforeUpload } = useUpload(formLoading, disabledbtn);

const suggest = ref('690x250');/* 建议尺寸 */

const id = ref(-1); /* 删除时所需的编号 删除时的id */

/* 关闭切换标签页以后的自定义操作 */
function handleCustomOperation () {
  advertisingInfoForm.id = '';
  /* 清除富文本编辑器中的数据 */
  editorRef.value.clear();
}

/* 点击编辑按钮 */
const handleViewEdit = (row, code, name) => {
  if ('view' === code) {
    isDisabledbtn.value = true;
  } else if ('edit' === code) {
    methodType.value = 'PUT';
  }
  /* 商品详情标签页显示 */
  setActiveName('two')
  advertisingInfoForm.id = row.id;
  advertisingInfoForm.position = row.position;
  advertisingInfoForm.image = row.image;
  advertisingInfoForm.goods_id = row.goods_id;
  advertisingInfoForm.banner_type_id = row.banner_type_id;
  advertisingInfoForm.banner_name = row.banner_name;
  advertisingInfoForm.detail = row.detail;
  valueHtml.value = row.detail;
  // advertisingInfoForm.start_time = row.start_time;
  advertisingInfoForm.sort = row.sort;
  // advertisingInfoForm.end_time = row.end_time;

  handleChangeAdvertising(row.position);
}

/* 修改广告位置 */
const handleChangeAdvertising = (data) => {
  /* 修改广告图片的样式 */
  if ('aixzuRedPacketAdvertising' === data) {
    /* 配件 334 * 470 */
    suggest.value = '335x440';
  } else if ('aixzuRedPacketBanner' === data) {
    /* 爱享租轮播图 */
    suggest.value = '690x150';
  } else if ('aixzuDailySpecial' === data) {
    /* 爱享租今日特价 */
    suggest.value = '142x165';
  } else {
    /* 首页 690 * 250 */
    suggest.value = '690x250';
  }
}

/* 保存与编辑 前的自定义校验或赋值操作 */
const handleValidAssignment = () => {
  if (
    advertisingInfoForm.banner_type_id === 2 &&
    (advertisingInfoForm.detail === '<p><br></p>' ||
      advertisingInfoForm.detail === '')
  ) {
    ElMessage.warning('请填写广告详情信息');
    return false;
  }
}


/* 获取表格信息 */
getTableInfo();
/* 获取广告类型信息 */
getListDataInfo('getBannerTypeInfo', state, 'selectBannerType');
/* 初始化请求类型，广告位置信息 */
getDictDataInfo('ADVERTISING', state, 'selectAdvertising');

onBeforeUnmount(() => {
  handleDestroyEditor();
})
</script>
<style lang="scss" scoped>
/* layout-布局 */
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.textAlignCenter {
  text-align: center;
}

/* 修改select的盒模型 */
.el-select {
  display: block;
}

/* 确定按钮的显示与隐藏 */
.displaybtn {
  display: none;
}

/* 修改该属性值  查询条件，查询结果得样式 */
.el-breadcrumb {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

/* 提示图标设置 */
.icon-wzg-config {
  height: 30px;
  line-height: 30px;
}

/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}

/* 修改Switch开关 */
.el-switch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* 富文本编辑 start */
#editor {
  width: 397px;
}

/* end */

/* 修改显示图片宽高 ,>>>用于修改组件中的css样式*/
:deep(.el-upload--text),
:deep(.el-upload--picture-card),
:deep(.avatar-uploader-icon) {
  width: 345px;
  height: 119px;
  line-height: 119px;
}

:deep(.el-upload-list__item) {
  width: 345px;
  height: 119px;
}

/* 图片上传 start */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

:deep(.el-upload--text) {
  width: inherit;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

// .avatar {
//   width: 345px;
//   height: 119px;
//   display: block;
// }
/* 图片上传 end */

/* 图片上传 start */
.w-spec .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.w-spec :deep(.el-upload--text) {
  width: inherit;
}

.w-spec .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.w-spec .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 345px;
  height: 125px;
  line-height: 125px;
  text-align: center;
}

.w-spec .avatar-uploader :deep(.el-upload--text) {
  height: inherit;
  padding: 2px 2px;
  line-height: inherit;
  color: #409eff;
}

.w-spec .wzg-continer-img {
  position: relative;
  display: inline-block;
  width: 345px;
  height: 125px;
  line-height: 125px;
  text-align: center;

  .wzg-img {
    width: inherit;
    height: inherit;
  }

  .el-icon-close {
    display: none;
  }
}

.w-spec .wzg-continer-img--ac,
.w-spec .avatar-uploader-icon--ac {
  width: 167px;
  height: 220px;
  line-height: 220px;
}

/* 爱享租广告图大小 start*/
.w-spec .wzg-continer-img--axzad,
.w-spec .avatar-uploader-icon--axzad {
  width: 167px;
  height: 220px;
  line-height: 220px;
}

/* end */
/* 爱享租轮播图大小 start*/
.w-spec .wzg-continer-img--axzba,
.w-spec .avatar-uploader-icon--axzba {
  width: 345px;
  height: 75px;
  line-height: 75px;
}

/* end */
/* 爱享租今日特价大小 start*/
.w-spec .wzg-continer-img--axzds,
.w-spec .avatar-uploader-icon--axzds {
  width: 71px;
  height: 82px;
  line-height: 82px;
}

/* end */

/* 图片删除按钮 start*/
.wzg-continer-img:hover .el-icon-close {
  position: absolute;
  top: 1px;
  right: -1px;
  z-index: 1000;
  display: inline-block;
  width: 24px;
  height: 24px;
  padding: 5px;
  cursor: pointer;
  background-color: rgba($color: #f00, $alpha: 0.8);
  color: #fff;
  border-radius: 2px;
  transition: 0.5s;
}

.w-spec .el-icon-close:hover {
  opacity: 0.8;
}
</style>
